<template>
<div>
    <h1 style="text-align:center;">路由！！！</h1>
    <!-- 路由(route)其实就是一个对应关系，key和value这种关系，前端中路径就是key，组件就是value，他们的对应关系就是路由(后端又不一样了)，多个路由由一个路由器（router）管理 -->

    <!-- 路由的存在是为了实现spa单页面应用，在vue中切换组件就靠路由，路由器通过路径变化来切换组件 -->

    <!-- 在vue中实现路由需要插件vue-router，他是专门来实现spa应用的 -->

    <!-- 对SPA应用的理解 1.单页面应用2.整个应用只有一个完整的页面3.点击页面中的导航链接不会刷新页面，只会做页面的局部刷新4.数据需要通过Ajax获取-->

    <!-- 使用vue-router步骤，npm i vue-router(目前默认vue-router版本是4，我们的vue版本是2，不匹配，3才个4匹配)，请npm i vue-router@3 -->
   <!-- 然后在main.js中引入，然后vue.use()就弄上了 -->

    <!-- 在vue中用a标签没办法实现修改路径改变路由，要用vue-router给我们的标签router-link,但是最后它还是变成
    标签了，那不关我们的事情 -->

    <!-- 在router-link里面加replace属性可以不留下上一个的历史记录，默认的模式是push，会留下历史记录 -->
   <router-link replace to='/school'>点击我到学校组件</router-link>
   <hr>
    <router-link to='/student'>点击我到学生组件</router-link>
    <!-- 还可以不借助router-link进行路由导航，叫做编程式路由导航 -->
    <button @click="GoTo">通过编程式路由导航跳转到student组件</button>



<!-- 有路由后分为一般组件（自己导入写标签的组件）和路由组件（路由帮你显示的组件） -->
<!-- 按照习惯一般components里面放一般组件，pages里面放路由组件 -->
<!-- 组件被切换的时候其实是被销毁了 -->
<!-- 被绑定了路由的组件身上会多两个东西，$route和$router,route是你的路由信息，router是整个路由器，所有路由啥的都在里面 -->
<!-- 用router-view标签指定组件的呈现位置 -->
    <router-view></router-view>

    <!-- 下面是子路由例子 -->
    <Father></Father>

    <!-- 路由可以跟两种参数，一种是query参数（跟在路径后面的?id=100这样子） -->
    <!-- 还有一种参数是params参数 -->

    <!-- 路径里面跟变量这个样写，:to='`${变量名}`' 这是字符串写法,query和params都是这样的-->

    <!-- :to='{
        path:'路径',
        query:{
            id:'xxx'
        }
    }'这是对象写法，反正你要用变量,to要v-bind,对象写法如果遇上命名组件，把path改成name，路径改成路由名字，params就把query改成params
        如果你使用params这里不允许用path，必须用那么表示路径 -->

        <!-- 组件在切换时是被销毁了，但有时候我们不希望被销毁，还保留之前的数据，我们可以用keep-alive标签把router-view标签包起来 -->
       <!-- 里面所有的组件都不会被销毁，如果你不喜欢这样，可以加个属性，include='组件名',这样只有这个组件不会被销毁了,多个你就:include="['xx','xxx']" -->
        <h1>这里是不会被销毁的组件</h1>
       <keep-alive>
             <router-view></router-view>
        </keep-alive>

        <!-- 路由组件有两个特有的生命周期钩子，只有路由组件才有 -->
        <!-- activated(被激活的)和deactivated（失活的），假如我们想在组件销毁时取消定时器，但是组件又被keep-alive包起来了，不能销毁
            也许我们就需要这两个生命周期的帮助        
        -->

        <!-- 路由守卫概念，指只有在达成条件的情况下才能查看该组件，在路由文件导出前在他身上使用beforeEach方法实现
            里面传一个函数，在你每次转换路由之前使用，还有初始化的时候也会被调用 -->


            <!-- 每个路由里面有个meta属性，叫做路由源信息，那些乱七八糟的数据你可以放在里面，使用方法是在配置路由时加一个meta配置项
                这些数据有时候有用，比如你要存些数据，或者路由守卫要判断信息什么的
            -->

            <!-- 可以看到路径上有个#叫hash，#后面的值叫路径里面的hash值，hash的值不会随着http请求发送到服务器 -->
            <!-- 路由器默认是hash模式，所以你能在路径上看到，改变模式要在路由器上面改mode属性 -->


    <!-- 下面是element测试组件 -->
                <Element></Element>

</div>
</template>

<script>
import Father from './components/Father.vue'
import Element from './components/Element.vue'
export default {
    name:'App',
    components:{Father,Element},
    methods:{
        GoTo(){
            // 编程式路由导航需要$router,$router其实是VueRouter的实例
            // 想用replace方式就把push换成push
            this.$router.push({
                // 如果你给路由取名字了path就换成name
                path:'/student',
                // 你要传params就换成params
                query:{
                    id:10
                }
            })

            // $router还能控制历史记录，上面的back方法是回退，forward是前进，go是传数字控制前进后退，比如传3就是前进3步，-1就是后退一步，0可以当作刷新
        }
    }
      
    

}
</script>


<style>

</style>